import React from 'react'
import './ContentList.scss'
import { contentList } from '../actions/contentListAction'
import { connect } from 'react-redux'
import ListItem from 'component/listItem/listItem.jsx'
import ScrollView from 'component/ScrollView/ScrollView.jsx'
class ContentList extends React.Component {
  constructor(props) {
    super(props)
    this.fetchData()
  }
  fetchData() {
    this.props.dispatch(contentList({}))
  }
  renderItems() {
    let list = this.props.list
    return list.map((item, index) => {
      return <ListItem key={index} itemData={item} />
    })
  }
  onLoadPage() {
    if (this.props.page <= 3) {
      this.fetchData()
    }
  }
  render() {
    return (
      <div className="list-content">
        <div className="list-content">
          <ScrollView
            loadCallback={this.onLoadPage.bind(this)}
            isend={this.props.isend}
          >
            {this.renderItems()}
          </ScrollView>
        </div>
      </div>
    )
  }
}

export default connect(state => ({
  list: state.contentListReducer.list,
  page: state.contentListReducer.page,
  isend: state.contentListReducer.isend
}))(ContentList)
